<template>
	<div class="errand ">

		<daya-clone-navbar :prop_clone_navbar="clone_navbar" :prop_is_ipx="is_ipx"/>

		<view class="bg-blue-300 h-50">aa</view>

		<!-- #ifdef H5 -->
		<view class="head"
					style="position: absolute; z-index: 10 !important; opacity: 0.7"
					:style="'top: 0rpx'"
		>
			<image src="https://ymqycc.oss-cn-chengdu.aliyuncs.com/ymqzho2o/static/icon/address.png"></image>
			<view>地址区域..</view>
			<image src="https://ymqycc.oss-cn-chengdu.aliyuncs.com/ymqzho2o/static/icon/jiantou.png"></image>
		</view>
		<!-- #endif -->

		<!-- #ifdef MP -->
		<view class="head"
					:style="'height:' + navBarHeight + 'px'"
		>
			<image src="https://ymqycc.oss-cn-chengdu.aliyuncs.com/ymqzho2o/static/icon/address.png"></image>
			<view>地址区域..</view>
			<image src="https://ymqycc.oss-cn-chengdu.aliyuncs.com/ymqzho2o/static/icon/jiantou.png"></image>
		</view>
		<!-- #endif -->


		<!--<navigator url="/ymq_canyino2o/pages/distribution/core">TEST</navigator>-->
		<!--<navigator url="/ymq_canyino2o/pages/sjzx/login">商家中心登录</navigator>-->

		<div class="nav ">

			<div v-if="home_tpl_id>0" class="nav-bottom">
				<div class="nav-bottom_item" v-for="item in home_tpl_nav_list" :key="item.id">
					<image :src="item.logo" mode="scaleToFill" />
					<text>{{ item.title }}</text>
				</div>
			</div>

			<div v-if="home_tpl_id==0" class="nav-bottom">

					<div class="nav-bottom_item" @click="toSendandcollect" v-for="i in 8">
						<image src="https://yunkeososyunchuc.bc8t.cn/ymq_canyino2o/static/kc.jpg" mode="scaleToFill" />
						<text>固定A</text>
					</div>

			</div>
		</div>

		<div class="notice ">招送餐员，全职兼职皆可，有意点我</div>

		<div class="swiper ">
			<!--<uni-swiper-dot class="uni-swiper-dot-box" field="content">-->
				<swiper :current="swipper_index" class="swiper-box">
					<swiper-item v-for="(item, index) in home_tpl_ad_list" :key="index">
						<image  :src="item.logo" mode="" style="height: 100%;width: 100%;"></image>
					</swiper-item>
				</swiper>
			<!--</uni-swiper-dot>-->
		</div>

		<!--固定图标-->
		<image class="page-fixed-round-btn  fixed-left-icon" src="https://ymqycc.oss-cn-chengdu.aliyuncs.com/ymqzho2o/static/icon/orders.png" mode="scaleToFill" @click="onRiderList" />
		<image class="page-fixed-round-btn  fixed-riight-icon" src="https://ymqycc.oss-cn-chengdu.aliyuncs.com/ymqzho2o/static/icon/kefu.png" mode="scaleToFill" @click="onServiceList" />
		<image class="page-fixed-rect-btn  left-fixed" src="https://ymqycc.oss-cn-chengdu.aliyuncs.com/ymqzho2o/static/icon/hongshuxian.png" mode="scaleToFill" @click="openClassify" />
		<image class="page-fixed-round-btn  shop" src="https://ymqycc.oss-cn-chengdu.aliyuncs.com/ymqzho2o/static/icon/bugcar.png" mode="scaleToFill" />

		<div class="menu">
			<div class="menu-left">附近商家</div>
			<!--首页模板分类-->
			<div class="menu-right">
				<div :class="['menu-item', home_tpl_id === 0 ? 'active' : '']"  @click="home_tpl_id=0;current_menu_index=0;query.home_tpl_type_id=0;">
					全部
				</div>
				<div class="" :class="['menu-item', home_tpl_id === item.id ? 'active' : '']" v-for="(item, index) in menu" :key="item.id" @click="onMenuClick(index,item)">
					{{ item.title }}
				</div>
			</div>
		</div>
		<div class="filter">
			<div class="filter-item"
				@click="query.by=''"
			>
				综合排序
				<image v-show="query.by==''" style="width: 8px;margin: 0;margin-left: 2px;" src="https://ymqycc.oss-cn-chengdu.aliyuncs.com/ymqzho2o/static/ymq_canyino2o/arrow-bottom.png" mode="scaleToFill" />
			</div>
			<div class="filter-item"
					 @click="query.by='juli asc'"
			>离我最近
				<image v-show="query.by=='juli asc'" style="width: 8px;margin: 0;margin-left: 2px;" src="https://ymqycc.oss-cn-chengdu.aliyuncs.com/ymqzho2o/static/ymq_canyino2o/arrow-bottom.png" mode="scaleToFill" />
			</div>

			<!--<div class="filter-item"-->
			<!--		 :class="query.yhhd?'query-active':''"-->
			<!--&gt;会员红包</div>-->

			<div @click="query_more=!query_more"
					 class="filter-item"
			>
				筛选
				<u-badge class="mr-5" style="margin-left: 5px;" v-show="query.nopsf || query.nostart || query.yhhd" type="warning" max="99" :isDot="true"></u-badge>
				<!--<image src="https://ymqycc.oss-cn-chengdu.aliyuncs.com/ymqzho2o/static/ymq_canyino2o/arrow-bottom.png" mode="scaleToFill" />-->
			</div>
		</div>
		<div  v-if="query_more" class="filter-wrapper" >
			<div class="items" @click="query.yhhd=!query.yhhd"
					 :class="query.yhhd?'query-active':''"
			>会员红包</div>
			<div class="items" @click="query.nopsf=!query.nopsf"
					 :class="query.nopsf?'query-active':''"
			>无配送费</div>
			<div class="items" @click="query.nostart=!query.nostart"
					 :class="query.nostart?'query-active':''"
			>无起送费</div>
		</div>
		<div class="store">
			<div v-for="store in store_list" :key="store.id"
					 @click="goToPageUrl('/ymq_canyino2o/pages/takeout/takeoutindex?storeid=' + store.id)"
					 class=" store-item">
				<image :src="store.logo" mode="scaleToFill" />
				<div class="right">
					<div class="name">{{ store.name }}</div>
					<div class="score">
						<div class="pinfen">
							<image src="https://yunkeososyunchuc.bc8t.cn/ymq_canyino2o/static/star.jpg" mode="scaleToFill" />
							<image src="https://yunkeososyunchuc.bc8t.cn/ymq_canyino2o/static/star.jpg" mode="scaleToFill" />
							<image src="https://yunkeososyunchuc.bc8t.cn/ymq_canyino2o/static/star.jpg" mode="scaleToFill" />
							<image src="https://yunkeososyunchuc.bc8t.cn/ymq_canyino2o/static/star.jpg" mode="scaleToFill" />
							<image src="https://yunkeososyunchuc.bc8t.cn/ymq_canyino2o/static/no-star.jpg" mode="scaleToFill" />
						</div>
						<div class="sales">月售{{store.sales}}</div>
						<div class="time">40分钟 | 5.8km</div>
					</div>
					<div class="bottom">
						<div class="price">起送价￥0 | 配送费￥4</div>
						<div class="btn">去购买</div>
					</div>
				</div>
			</div>

		</div>

		<uni-popup ref="popup" background-color="#fff">
			<ul style="width: 250rpx">
				<li style="padding: 30rpx 40rpx; color: #34aaff" v-for="item in leftClassify[current_menu_index]" :key="item.id" @click="onClassifyClick">{{ item.label }}</li>
			</ul>
		</uni-popup>

		<div style="height: 100px;"></div>

		<u-skeleton :loading="page_loading" :animation="true" bgColor="#000"></u-skeleton>
	</div>
</template>

<script>
var app = getApp();
export default {
	components: {},
	data() {
		return {
			page_loading:true,
			query:{
				lat:0,//纬度
				lng:0,//经度
				md_type:0,//0=不限 40=热门 41=好店
				home_tpl_type_id:0,//所属模板类型(查数据库或后台)  0=不限 其他为首页模板id
				yhhd:0,//优惠活动
				nostart:0,//无起送费用
				nopsf:0,//无配送费
				page:0,
				pagesize:10,
				by:'', //字段+排序asc desc  juli
			},
			store_order:"", //排序字段+排序方式
			store_list:[],
			// navs: [],
			home_tpl_id: 0, //首页模板id
			current_menu_index: 0,
			navBarHeight: 0,
			menu: [],
			home_tpl_nav_list: [],
			query_more: false,
			swipper_index: 0,
			home_tpl_ad_list: [],
			leftClassify: [
				[
					{
						id: 0,
						label: '家电维修'
					},
					{
						id: 1,
						label: '汽车维修'
					},
					{
						id: 2,
						label: '摩托维修'
					},
					{
						id: 3,
						label: '自行车维修'
					},
					{
						id: 4,
						label: '农机类维修'
					},
					{
						id: 5,
						label: '收废品'
					},
					{
						id: 6,
						label: '搬运'
					},
					{
						id: 7,
						label: '招聘'
					}
				],
				[
					{
						id: 0,
						label: '奶茶'
					},
					{
						id: 1,
						label: '蛋糕'
					},
					{
						id: 2,
						label: '早餐'
					},
					{
						id: 3,
						label: '粉食'
					},
					{
						id: 4,
						label: '小吃摊'
					},
					{
						id: 5,
						label: '快餐'
					},
					{
						id: 6,
						label: '大排档'
					},
					{
						id: 7,
						label: '烧烤'
					}
				],
				[
					{
						id: 0,
						label: '粮油'
					},
					{
						id: 1,
						label: '冰鲜'
					},
					{
						id: 2,
						label: '菜篮子'
					},
					{
						id: 3,
						label: '商超便利店'
					},
					{
						id: 4,
						label: '研究茶叶'
					},
					{
						id: 5,
						label: '药店'
					},
					{
						id: 6,
						label: '文具书店'
					},
					{
						id: 7,
						label: '服饰'
					}
				]
			]
		};
	},
	computed: {
	},
	watch: {
		//query对象
		query: {
			handler: function (newVal, oldVal) {
				this.query.page = 1;
				//防抖,无论触发多少次,只执行最后一次  单位ms
				uni.$u.debounce(this.load_store_list, 200)
			},
			deep: true
		},
	},
	created() {
	},
	mounted() {
		this.getTemplateNavAd();
		// this.load_store_list();
		this.load_gps_store();
	},

	// 页面周期函数--监听页面加载
	onLoad() {

		app.globalData.setNavigationBarColor(this);
		this.appPageOnLoad(app);

		// #ifdef MP-WEIXIN

		const systemInfo = wx.getSystemInfoSync();
		// 胶囊按钮位置信息
		const menuButtonInfo = wx.getMenuButtonBoundingClientRect();
		// 导航栏高度 = 状态栏到胶囊的间距（胶囊距上距离-状态栏高度） * 2 + 胶囊高度 + 状态栏高度
		const navBarHeight = (menuButtonInfo.top - systemInfo.statusBarHeight) * 2 + menuButtonInfo.height + systemInfo.statusBarHeight;
		this.navBarHeight = navBarHeight;

		// #endif

	},
	// 页面周期函数--监听页面初次渲染完成
	onReady() {},
	// 页面周期函数--监听页面显示(not-nvue)
	onShow() {},
	// 页面周期函数--监听页面隐藏
	onHide() {},
	// 页面周期函数--监听页面卸载
	onUnload() {},
	// 页面处理函数--监听用户下拉动作
	// onPullDownRefresh() { uni.stopPullDownRefresh(); },
	// 页面处理函数--监听用户上拉触底
	// onReachBottom() {},
	// 页面处理函数--监听页面滚动(not-nvue)
	// onPageScroll(event) {},
	// 页面处理函数--用户点击右上角分享
	// onShareAppMessage(options) {},

	methods: {
		load_gps_store() {
			let that = this;
			uni.getLocation({
				type: 'gcj02',
				success: function(res) {
					console.log("地理位置",res);
					that.query.lat = res.latitude;
					that.query.lng = res.longitude;

					that.load_store_list();
				},
				fail: function(e) {
					that.load_store_list();
				},
			});
		},
		load_store_list() {
			console.log("加载店铺列表数据")
			let that = this;
			///app/index.php?i=2&t=0&v=1.1.1&from=wxapp&c=entry&a=wxapp&do=store_list&m=ymq_canyino2o&page=1
			app.globalData.util.request({
				url: 'entry/wxapp/store_list',
				data:{
					...this.query
				},
				success(res) {
					if (res.data.code==1){
						console.log("店铺数据",res.data.data);
						that.store_list = res.data.data;
					}
				},
				complete(){
					// that.page_loading=false
				}
			});
		},
		getTemplateNavAd() {
			let that = this;
			app.globalData.util.request({
				url: 'entry/wxapp/home_tpl_type',
				success(res) {
					console.log(res.data.data);
					that.menu = res.data.data;
					that.navBanner = res.data.data[0].home_tpl_nav_list;
					this.swipper_index = 0;
					that.home_tpl_ad_list = res.data.data[0].home_tpl_ad_list;
				}
			});
		},
		onMenuClick(index,item) {
			this.current_menu_index = index;
			this.home_tpl_id = item.id;
			this.query.home_tpl_type_id = item.id;
			this.home_tpl_nav_list = item.home_tpl_nav_list;
			this.swipper_index = 0;
			this.home_tpl_ad_list = item.home_tpl_ad_list;
		},
		onClassifyClick() {
			uni.navigateTo({
				url: '/ymq_canyino2o/pages/shopClassify/index'
			});
		},
		openClassify() {
			this.$refs.popup.open('left');
		},
		onServiceList() {
			uni.navigateTo({
				url: '/ymq_canyino2o/pages/serviceList/index'
			});
		},
		onRiderList() {
			uni.navigateTo({
				url: '/ymq_canyino2o/pages/errand/list'
			});
		},
		toSendandcollect() {
			uni.navigateTo({
				url: '/ymq_canyino2o/pages/errand/sendandcollect/index?type=1'
			});
		},
		toHotboom() {
			uni.navigateTo({
				url: '/ymq_canyino2o/pages/errand/hotboom/index'
			});
		},
		toErrand() {
			uni.navigateTo({
				url: '/ymq_canyino2o/pages/errand/add_order/index'
			});
		}
	}
};
</script>

<style scoped>
.errand {
	position: relative;
	background: #f6f6f6;
	min-height: 100vh;
}
.head {
	background: #FFCD36;
	display: flex;
	align-items: flex-end;
	padding: 10rpx;
}
.head view {
	font-size: 30rpx;
	font-weight: 600;
	padding: 0 4rpx;
}
.head image, .head uni-image {
	width: 40rpx;
	height: 40rpx;
}
.nav {
	width: 100vw;
	padding: 10rpx 2.5%;
	background: #f7f78b;
}
.nav text {
	font-weight: 600;
}


.nav-bottom {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	align-items: center;
}

.nav-bottom image, .nav-bottom uni-image {
	width: 100rpx;
	height: 100rpx;
}
.nav-bottom_item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 25%;
}
.nav-bottom_item:nth-child(3) image, .nav-bottom_item:nth-child(3) uin-image {
	width: 200rpx;
	height: 200rpx;
	position: relative;
	top: -10rpx;
}
.notice {
	width: 95%;
	margin: 20rpx auto;
	background: #fdf4ed;
	padding: 20rpx 20rpx 20rpx 80rpx;
	color: #e7b65a;
	font-weight: 600;
}
.swiper {
	width: 80%;
	margin: 10rpx auto;
}
.swiper image, .swiper uni-image {
	width: 100%;
	height: 300rpx;
	border-radius: 20rpx;
}
.page-fixed-round-btn{
	background-color: white;
	padding: 10rpx;
	box-shadow: 5rpx 5rpx 15rpx #ccc;
	border-radius: 50%;
	z-index: 10;
}
.page-fixed-rect-btn{
	background-color: white;
	padding: 5rpx;
	box-shadow: 5rpx 2rpx 10rpx #ccc;
	border-radius: 5px;
	z-index: 10;
}
.fixed-left-icon {
	width: 80rpx;
	height: 80rpx;
	position: fixed;
	left: 20rpx;
	top: 520rpx;
}
.fixed-riight-icon {
	width: 80rpx;
	height: 80rpx;
	position: fixed;
	right: 20rpx;
	top: 520rpx;
}
.left-fixed {
	width: 40rpx;
	height: 250rpx;
	position: fixed;
	left: 0;
	top: 620rpx;
	border-top-right-radius: 10rpx;
	border-bottom-right-radius: 10rpx;
}
.menu {
	width: 95%;
	display: flex;
	align-items: flex-start;
	margin: 30rpx auto;
}
.menu-left {
	width: 20%;
	text-align: center;
	font-size: 30rpx;
	font-weight: 600;
	color: #333;
	position: relative;
}
.menu-left::after {
	content: ' ';
	display: block;
	width: 20%;
	height: 15rpx;
	background: #fac939;
	position: absolute;
	bottom: -15rpx;
	left: 50%;
	transform: translateX(-50%);
	border-bottom-left-radius: 20rpx;
	border-bottom-right-radius: 20rpx;
}
.menu-right {
	width: 80%;
	display: flex;
	flex-wrap: wrap;
	margin-left: 80rpx;
	/* justify-content: space-between; */
	font-size: 28rpx;
}
.menu-right .menu-item {
	border-bottom: 2px solid #f89e9e;
	padding: 0 10rpx;
	margin-right: 40rpx;
}
.menu-right .menu-item.active {
	position: relative;
	font-weight: 600;
	color: #000;
}
.filter {
	width: 95%;
	display: flex;
	justify-content: space-between;
	margin: 60rpx auto 20rpx;
}
.query-active{
	background-color: #fa8f47 !important;
	color: white !important;
	border-radius: 10rpx;
	box-shadow: 1rpx 1rpx 5rpx #ccc;
}
.filter-item {
	width: 20%;
	display: flex;
	justify-content: center;
	align-items: center;
}
.filter-item image, .filter-item uni-image {
	width: 20rpx;
	height: 20rpx;
	margin-left: 10rpx;
}
.filter-wrapper {
	width: 95%;
	display: flex;
	justify-content: space-between;
	margin: 0 auto;
}
.filter-wrapper .items {
	width: 20%;
	background: #fff;
	border-radius: 10rpx;
	color: #000;
	padding: 10rpx 0;
	text-align: center;
}
.store {
	width: 95%;
	margin: 20rpx auto 160rpx;
}
.store-item {
	background: #fff;
	padding: 20rpx;
	border-radius: 20rpx;
	display: flex;
	margin-bottom: 20rpx;
}
.store-item image, .store-item uni-image {
	width: 150rpx;
	height: 150rpx;
	margin-right: 20rpx;
}
.store-item .right {
	width: calc(100% - 170rpx);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.store-item .right .name {
	font-weight: 600;
}
.store-item .right .score {
	display: flex;
	/* justify-content: space-between; */
	align-items: center;
	font-size: 26rpx;
	/* margin-top: 20rpx; */
}
.store-item .right .score .pinfen {
	display: flex;
}
.store-item .right .score .pinfen image, .store-item .right .score .pinfen uni-image {
	width: 30rpx;
	height: 30rpx;
	margin-right: 5rpx;
}
.store-item .right .score .time {
	margin-left: auto;
}
.store-item .right .score .sales {
	margin-left: 10rpx;
}
.store-item .right .bottom {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	font-size: 26rpx;
}
.store-item .right .bottom .btn {
	padding: 2rpx 10rpx;
	background: #feca34;
	color: #333;
	border-radius: 10rpx;
}
.shop {
	width: 80rpx;
	height: 80rpx;
	position: fixed;
	right: 20rpx;
	bottom: 160rpx;
}
</style>
